<!-- 
由于页面改动；此页面作废 
 -->
<!--订单搜索、添加订单、切换导航、订单列表 -->
<template>
	<div class="contact flex" id="order">
		<div class="information">
			<div class="topfixed">
				<div class="infosearch marginAuto">
					<el-input class="infosearch-input"
					@change="searchOrderListfun" v-model="searchtxt" 
					prefix-icon="el-icon-search" placeholder="搜索"
					v-if="roleId == 2 || roleId == 6"
					></el-input>
					<el-input class="infosearch-input"
					@change="searchOrderListfun" v-model="searchtxt" 
					prefix-icon="el-icon-search" placeholder="搜索"
					v-else
					style="width:180px;"
					></el-input>
					<img class="infosearch-add curpoin" v-if="roleId == 2 || roleId == 6" @click="neworderis=true" src="@/assets/fun/add.png" alt="添加" />
				</div>
				<div class="ointnav marginAuto">
					<div class="ointnavmain flex curpoin">
						<div class="ointnaveach" @click="navacfun(0)" :class="navac == 0 ? 'navactive':''">全部</div>
						<div class="ointnaveach" @click="navacfun(1)" :class="navac == 1 ? 'navactive':''" v-if="roleId == 2 || roleId == 3">待指派</div>
						<div class="ointnaveach" @click="navacfun(2)" :class="navac == 2 ? 'navactive':''">进行中</div>
						<div class="ointnaveach" @click="navacfun(3)" :class="navac == 3 ? 'navactive':''" v-if="roleId == 7">团队订单</div>
						<div class="ointnaveach" @click="navacfun(4)" :class="navac == 4 ? 'navactive':''">投诉单</div>
						<div class="ointnaveach" @click="navacfun(5)" :class="navac == 5 ? 'navactive':''">已完成</div>
					</div>
				</div>
			</div>
			<div class="ointblock marginAuto" @scroll="ointsescrollfun">
				<div class="ointeach curpoin" v-for="(item,index) in ointdata" :key="index"
					@click="ointsefun(item,index)" :class="ointdataac == item.id ? 'activeointeach':''">
					<img class="ointeachbricon" src="@/assets/fun/ointicon.png" alt="图标" />
					<img class="ointeachbricon" v-if="ointdataac == item.id" style="width:32px;height:32px;right:3px;bottom:3px;" src="@/assets/fun/ointicon.png" alt="图标" />
					<div class="ointeacht mainColor flex">
						<span class="ellipsis01" style="width:70%;display:inline-block;">{{ item.order_sn }}</span>
						<!-- <span v-if="item.order_status == 0">待分派</span>
						<span v-if="item.order_status != 0">已分派</span> -->
						<span>{{ orderstatusdata[item.order_status].name }}</span>
					</div>
					<div class="ointeachb">
						<div class="ointeachbtitle ellipsis01">{{ item.order_name }}</div>
						<div class="ointeachbdec ellipsis01">{{ item.design_need }}</div>
					</div>
				</div>
				<div class="loadingicon" v-if="isloadingicon" style="height:20px;text-align:center;"><span class="el-icon-loading" style="font-size:22px;"></span></div>
			</div>
		</div>
		<div class="rblock">
			<orderxq :orderitem="orderitem" ref="orderxq"></orderxq>
		</div>
		<!-- 创建新订单 -->
		<el-dialog  
			id="createorder"
		  title="创建新订单"
		  :visible.sync="neworderis"
		  width="432px"
		  top="70px"
		  :before-close="neworderClosefun"
		  :modal-append-to-body="false">
			<div class="eyeach flex">
				<p class="eyeachtitle">客户编号：</p>
				<div class="eyeachr">
					<el-input class="eyeachrinput" v-model="mobile" placeholder="请输入客户编号"></el-input>
				</div>
			</div>
			<div class="eyeach flex">
				<p class="eyeachtitle">订单名称：</p>
				<div class="eyeachr">
					<el-input class="eyeachrinput" v-model="order_name" placeholder="请输入订单名称"></el-input>
				</div>
			</div>
			<div class="eyeach flex">
				<p class="eyeachtitle">订单金额：</p>
				<div class="eyeachr">
					<el-input class="eyeachrinput" v-model="order_amount" placeholder="请输入订单金额"></el-input>
				</div>
			</div>
			
			<div class="eyeach flex">
				<p class="eyeachtitle">设计需求：</p>
				<div class="eyeachr">
					<textarea class="eyeachrneed" v-model="design_need" placeholder="设计需求"></textarea>
				</div>
			</div>
			<div class="eyeach flex" v-if="roleId == 2">
				<p class="eyeachtitle">销售人员：</p>
				<div class="eyeachr">
					<el-select style="width:100%;" v-model="xsacname" placeholder="请选择" @change="xsacfun">
						<el-option
							v-for="(item,index) in xslistdata" :key="index"
							:label="item.realname" :value="item.user_id">
						</el-option>
					</el-select>
				</div>
			</div>
			<div class="eyeach flex">
				<p class="eyeachtitle">设计类型：</p>
				<div class="eyeachr">
					<el-select style="width:100%;" v-model="designArracname" placeholder="请选择" @change="designArracfun">
						<el-option
							v-for="(item,index) in creaorderopdata.designArr" :key="index"
							:label="item.name" :value="item.id">
						</el-option>
					</el-select>
				</div>
			</div>
			
			<div class="eyeach flex">
				<p class="eyeachtitle">业务类型：</p>
				<div class="eyeachr">
					<el-select style="width:100%;" v-model="businessArracname" placeholder="请选择" @change="businessArracfun">
						<el-option
							v-for="(item,index) in creaorderopdata.businessArr" :key="index"
							:label="item.name" :value="item.id">
						</el-option>
					</el-select>
				</div>
			</div>
			<div class="eyeach flex">
				<p class="eyeachtitle">设计项目：</p>
				<div class="eyeachr">
					<el-select style="width:100%;" v-model="programArracname" placeholder="请选择" @change="programArracfun">
						<el-option
							v-for="(item,index) in creaorderopdata.programArr" :key="index"
							:label="item.name" :value="item.id">
						</el-option>
					</el-select>
				</div>
			</div>
			<div class="eyeach flex">
				<p class="eyeachtitle">订单状态：</p>
				<div class="eyeachr">
					<el-select style="width:100%;" v-model="orderstatusacname" placeholder="请选择" @change="orderstatusacfun">
						<el-option
							v-for="(item,index) in orderstatusdata" :key="index"
							:label="item.name" :value="item.id">
						</el-option>
					</el-select>
				</div>
			</div>
			<div class="eyeach flex">
				<p class="eyeachtitle">开票信息：</p>
				<div class="eyeachr">
					<el-select style="width:100%;" v-model="invoiceacname" placeholder="请选择" @change="invoiceacfun">
						<el-option
							v-for="(item,index) in invoicedata" :key="index"
							:label="item.name" :value="item.id">
						</el-option>
					</el-select>
				</div>
			</div>
			<div class="eyeach flex">
				<p class="eyeachtitle">代收款返还：</p>
				<div class="eyeachr">
					<el-select style="width:100%;" v-model="returnacname" placeholder="请选择" @change="returnacnameacfun">
						<el-option
							v-for="(item,index) in returndata" :key="index"
							:label="item.name" :value="item.id">
						</el-option>
					</el-select>
				</div>
			</div>
			<div class="eyeach flex" v-if="returnacid == 1">
				<p class="eyeachtitle">代收款金额：</p>
				<div class="eyeachr">
					<el-input class="eyeachrinput" v-model="due_in_amount" placeholder="请输入代收款金额"></el-input>
				</div>
			</div>
			<div class="eyeach flex">
				<p class="eyeachtitle">备注：</p>
				<div class="eyeachr">
					<textarea class="eyeachrneed" v-model="remark" placeholder="请输入备注"></textarea>
				</div>
			</div>
			<div class="eyeach flex">
				<p class="eyeachtitle">尾款：</p>
				<div class="eyeachr">
					<el-input class="eyeachrinput" v-model="residue_amount" placeholder="请输入尾款"></el-input>
				</div>
			</div>
			 
			<div class="eyeach flex">
				<p class="eyeachtitle">付款方式：</p>
				<div class="eyeachr">
					<el-select style="width:100%;" v-model="payArracname" placeholder="请选择" @change="payArracfun">
						<el-option
							v-for="(item,index) in creaorderopdata.payArr" :key="index"
							:label="item.name" :value="item.id">
						</el-option>
					</el-select>
				</div>
			</div>
			<div class="eyeach flex">
				<p class="eyeachtitle">是否加急：</p>
				<div class="eyeachr">
					<el-select style="width:100%;" v-model="urgentacname" placeholder="请选择" @change="urgentacfun">
						<el-option
							v-for="(item,index) in urgentdata" :key="index"
							:label="item.name" :value="item.id">
						</el-option>
					</el-select>
				</div>
			</div>
			<div class="eyeach flex" v-for="(item,index) in orderarrdata">
				<p class="eyeachtitle">{{ item.name }}：</p>
				<div class="eyeachr">
					<el-input class="eyeachrinput" v-model="item.fieldtxt" :placeholder="`请输入${item.name}`"></el-input>
				</div>
			</div>
			
			<div v-if="invoiceacid == 1">
				<div class="eyeach flex">
					<p class="eyeachtitle">开票信息：</p>
				</div>
				<div class="eyeach flex">
					<p class="eyeachtitle">开票对应公司：</p>
					<div class="eyeachr">
						<el-input class="eyeachrinput" v-model="invoice_company" placeholder="请输入开票对应公司"></el-input>
					</div>
				</div>
				<div class="eyeach flex">
					<p class="eyeachtitle">开票金额：</p>
					<div class="eyeachr">
						<el-input class="eyeachrinput" v-model="invoice_amount" placeholder="请输入开票金额"></el-input>
					</div>
				</div>
				<div class="eyeach flex">
					<p class="eyeachtitle">开票公司信息：</p>
					<div class="eyeachr">
						<el-input class="eyeachrinput" v-model="invoice_company_info" placeholder="请输入开票公司信息"></el-input>
					</div>
				</div>
				<div class="eyeach flex">
					<p class="eyeachtitle">开票人姓名：</p>
					<div class="eyeachr">
						<el-input class="eyeachrinput" v-model="invoice_name" placeholder="请输入开票人姓名"></el-input>
					</div>
				</div>
				<div class="eyeach flex">
					<p class="eyeachtitle">税号：</p>
					<div class="eyeachr">
						<el-input class="eyeachrinput" v-model="invoice_no" placeholder="请输入税号"></el-input>
					</div>
				</div>
				<div class="eyeach flex">
					<p class="eyeachtitle">注册地址：</p>
					<div class="eyeachr">
						<el-input class="eyeachrinput" v-model="invoice_address" placeholder="请输入注册地址"></el-input>
					</div>
				</div>
				<div class="eyeach flex">
					<p class="eyeachtitle">联系电话：</p>
					<div class="eyeachr">
						<el-input class="eyeachrinput" v-model="invoice_tel" placeholder="请输入联系电话"></el-input>
					</div>
				</div>
				<div class="eyeach flex">
					<p class="eyeachtitle">开户行：</p>
					<div class="eyeachr">
						<el-input class="eyeachrinput" v-model="invoice_bank" placeholder="请输入开户行"></el-input>
					</div>
				</div>
				<div class="eyeach flex">
					<p class="eyeachtitle">开户行行号：</p>
					<div class="eyeachr">
						<el-input class="eyeachrinput" v-model="invoice_bank_code" placeholder="请输入开户行行号"></el-input>
					</div>
				</div>
				<div class="eyeach flex">
					<p class="eyeachtitle">银行账号：</p>
					<div class="eyeachr">
						<el-input class="eyeachrinput" v-model="invoice_bank_card" placeholder="请输入银行账号"></el-input>
					</div>
				</div>
			</div>
			<div class="uploadbtn flex" style="margin-top:20px;">
			   <div class="uploadbtneach curpoin flex" @click="uploadfilekindfun(1)">
				   <img class="uploadbtneachimg" src="@/assets/fun/uploadicon.png" alt="" />
				   <span class="uploadbtneachtxt mainColor">上传设计需求文件</span>
			   </div>
			   <div class="uploadbtneach curpoin flex" @click="uploadfilekindfun(2)">
				   <img class="uploadbtneachimg" src="@/assets/fun/uploadicon.png" alt="" />
				   <span class="uploadbtneachtxt mainColor">上传备注文件</span>
			   </div>
			</div>
			<div class="replacebtn" style="margin-top:20px;">
			   <el-button class="replacebtneach" style="background-color:#999999;" @click="neworderis=false">取消</el-button>
			   <el-button class="replacebtneach mainbg" @click="newordernterfun()">提交</el-button>
			</div>
		</el-dialog>
		<el-dialog  
		  :title="uploadskind == 1 ? '上传设计需求文件':'上传备注文件'"
		  :visible.sync="uploadsjxqis"
		  width="400px"
		  top="70px"
		  :before-close="uploadClosefun"
		  :modal-append-to-body="false">
			<el-upload
			  id="uploadfliexq"
			  drag
			  multiple
			  :show-file-list="false"
			  :action="apifun.hrefURL + '/pc/Upload/fileUpload'"
			  name="file"
			  :headers="token"
			  :on-success="uploadfileSuccess"
			  :before-upload="uploadfile.fileSize"
			  >
			  <i class="el-icon-upload"></i>
			  <div class="el-upload__text">将文件拖到此处，或<em class="mainColor">点击上传</em></div>
			  <div class="el-upload__tip" slot="tip">上传的文件不超过{{ uploadfile.fileSizenum }}M</div>
			</el-upload>
			<div class="flielist">
				<div class="flieitem flex" v-for="(item,index) in uploadsjxqdata" :key="index">
					<div class="flieiteml">
						<span class="flieitemlicon el-icon-document"></span>
						<span class="flieitemlname">{{ item.name }}</span>
					</div>
					<div class="flieitemr curpoin" @click="delsjxqfun(item,index)">
						<span class="el-icon-delete"></span>
					</div>
				</div>
			</div>
			<!-- <div class="replacebtn" style="margin-top:20px;">
			   <el-button class="replacebtneach mainbg" @click="uploadsjxqisfun()">完成</el-button>
			</div> -->
		</el-dialog>
	</div>
</template>

<script>
	import orderxq from '@/components/order/orderxq';
	export default {
		components:{
			orderxq
		},
		data(){
			return {
				token:{
					Authorization:localStorage.getItem('token')
				},
				roleId:'',
				page:1,
				limit:10,
				isshake : true,
				isloadingicon:false,
				searchtxt:'',
				navac:0,
				ointdata:[],  // 订单列表
				ointdataac:'',
				orderitem:{},
				neworderis:false,  // 创建新订单
				creaorderopdata:{},
				mobile:'',
				order_name:'',
				order_amount:'',
				due_in_amount:'',
				design_need:'',
				designArracname:'',
				designArracid:'',
				businessArracname:'',
				programArracid:'',
				programArracname:'',
				programArracid:'',
				orderstatusdata:[{name:"未分配",id:"0"},{name:"进行中",id:"1"},{name:"已定稿",id:"2"},{name:"死单",id:"3"},{name:"暂停",id:"4"},{name:"退款中",id:"5"},{name:"已退款",id:"6"}],
				orderstatusacname:'',
				orderstatusacid:'',
				invoicedata:[{name:"不开票",id:"0"},{name:"开票",id:"1"}],
				invoiceacname:'',
				invoiceacid:'',   // 开票信息
				returndata:[{name:"否",id:"0"},{name:"是",id:"1"}],
				returnacname:'',
				returnacid:'',
				remark:'',
				residue_amount:'',  // 尾款
				payArracname:"",
				payArracid:'',
				urgentdata:[{name:"不加急",id:"0"},{name:"加急",id:"1"}],
				urgentacname:'',
				urgentacid:'',
				design_need_file:[],  //  需求文件 
				remark_files:[],   // 备注文件
				invoice_company:'',  // 开票对应公司 （下面开票信息部分）
				invoice_amount:'',
				invoice_company_info:'',
				invoice_name:'',
				invoice_no:'',
				invoice_address:'',
				invoice_tel:'',
				invoice_bank:'',
				invoice_bank_code:'',
				invoice_bank_card:'',
				xslistdata:[],
				xsacname:'',
				sale_id:'',  // 销售id （销售总监提交时必传）
				uploadsjxqis:false,  // 上传文件
				uploadskind:'',  // 1需求文件 、2备注文件
				uploadsjxqdata:[],  // 保存上传文件临时文件
				orderarrdata:[]
			}
		},
		mounted(){
			this.roleId = this.$store.state.roleId;
			this.getCreaOrderOption();  // 创建订单选项
			if(this.roleId == 2){
				this.getdesigner();  // 销售成员
			}
			this.page =  1;
			this.ointdata=[];
			this.getOrderListfun();
			this.getOrderArrfun();
		},
		methods:{
			newordernterfun(){  // 新订单提交
				let design_need_file = [];
				let remark_files = [];
				this.design_need_file.forEach((item,index)=>{
					design_need_file.push(item.id)
				});
				this.remark_files.forEach((item,index)=>{
					remark_files.push(item.id)
				});
				let sendData = {
					mobile:this.mobile,
					order_name:this.order_name,
					order_amount:this.order_amount,
					due_in_amount:this.due_in_amount,
					design_need:this.design_need,
					design_type:this.designArracid,
					business_type:this.programArracid,
					program_id:this.programArracid,
					order_status:this.orderstatusacid,
					is_invoice:this.invoiceacid,  // 开票信息 0不开  1开
					due_in_refund:this.returnacid,
					remark:this.remark,
					pay_type:this.payArracid,
					is_urgent:this.urgentacid,
					residue_amount:this.residue_amount,
					design_need_file:design_need_file,  // 需求文件
					remark_file_id:remark_files,   // 备注文件
					invoice_company:this.invoice_company,
					invoice_amount:this.invoice_amount,
					invoice_company_info:this.invoice_company_info,
					invoice_name:this.invoice_name,
					invoice_no:this.invoice_no,
					invoice_address:this.invoice_address,
					invoice_tel:this.invoice_tel,
					invoice_bank:this.invoice_bank,
					invoice_bank_code:this.invoice_bank_code,
					invoice_bank_card:this.invoice_bank_card
				};
				this.orderarrdata.forEach((item,index)=>{
					sendData[item.field] = item.fieldtxt;
				});
				let urls = "/pc/Order/estOrder";  // 销售员
				if(this.roleId == 2){
					sendData.sale_id = this.sale_id;
				};
				this.apifun.$post(urls,sendData).then((res)=>{
					// console.log(res)
					if(res.code ==  200){
						this.$message({
							message: '创建成功',
							type: 'success'
						});
						this.neworderis = false;
						this.page = 1;
						this.ointdata = [];
						this.ointdataac='';
						this.orderitem={};
						this.getOrderListfun();
					}
				})
			},
			neworderClosefun(){ // 关闭
				this.neworderis = false;  // 关闭添加订单
			},
			getCreaOrderOption(){  // 获取创建订单时的选项
				this.apifun.$post('/pc/Order/getCreateOrderOptionArr',{}).then((res)=>{
					// console.log(res)
					if(res.code ==  200){
						this.creaorderopdata = res.data;
						/* designArr  设计类型、  businessArr 业务类型、  payArr 付款方式、 programArr 设计项目  
						designerArr  //设计师  saleArr  //销售  { "user_id": 139, "realname": "新增销售测试" }
						*/
					}
				})
			},
			xsacfun(e){
				this.sale_id = e;
			},
			designArracfun(e){  // 选择设计类型
				this.designArracid = e;
			},
			businessArracfun(e){
				this.businessArracid = e;
			},
			programArracfun(e){
				this.programArracid = e;
			},
			orderstatusacfun(e){
				this.orderstatusacid = e;
			},
			payArracfun(e){
				this.payArracid = e;
			},
			returnacnameacfun(e){
				this.returnacid = e;
				if(this.returnacid == 0){
					this.due_in_amount = 0;
				};
			},
			urgentacfun(e){
				this.urgentacid = e;
			},
			invoiceacfun(e){
				this.invoiceacid = e;
			},
			// ---上传设计文件
			uploadfileSuccess(res,file){  // 上传文件 
				let sendData = {
					raw:file.raw,  // name、path、size、type、uid
					name:file.name,
					id:res.data
				};
				if(res.code == 200){
					this.uploadsjxqdata.unshift(sendData);  // 设计需求
				}else{
					this.$message({
					  message: res.msg,
					  type: 'warning'
					});
				}
			},
			delsjxqfun(item,index){  // 删除设计需求
				this.uploadsjxqdata.splice(index,1)
			},
			uploadfilekindfun(type){  // 上传文件类别
				let kinddata = type == 1 ? this.design_need_file : this.remark_files;
				this.uploadsjxqdata = kinddata;
				this.uploadskind = type;
				this.uploadsjxqis = true;
			},
			// uploadsjxqisfun(){  //  完成  (1需求文件  2备注文件)
			// 	if(this.uploadsjxqdata.length <= 0){
			// 		this.$message({
			// 		  message: '您还没有上传任何文件',
			// 		  type: 'warning'
			// 		});
			// 		return false
			// 	};
			// 	if(this.uploadskind == 1){
			// 		this.design_need_file = this.uploadsjxqdata;
			// 	}else{
			// 		this.remark_files = this.uploadsjxqdata
			// 	}
			// 	this.uploadsjxqis = false;
			// },
			uploadClosefun(){
				this.uploadsjxqis = false;
			},
			// 基础fun
			navacfun(type){
				if(type == this.navac)return false;
				this.navac=type;
				this.page = 1;
				this.ointdata = [];
				this.ointdataac='';
				this.orderitem={};
				this.getOrderListfun();
			},
			ointsefun(item,index){  // 切换指派列表
				this.ointdataac = item.id;
				this.orderitem = item;
				setTimeout(()=>{
					this.$refs.orderxq.getorderxqfun(this.navac);
				})
			},
			ointsescrollfun(event){
				const { scrollTop, scrollHeight, clientHeight } = event.target;
			    if (this.isloadingicon) return;
				if (scrollTop + clientHeight >= scrollHeight - 10) {  // 留10px加载
					if(this.isshake){
						this.isshake = false;
						this.page++;
						this.getOrderListfun();
					}
				}
			},
			searchOrderListfun(){  // 搜索订单
				this.page = 1;
				this.ointdata = [];
				this.ointdataac='';
				this.orderitem={};
				this.getOrderListfun();
			},
			getOrderListfun(){  // 获取订单列表  //type=》  0全部 1待指派 2进行中 3团队订单 4投诉单 5已完成
				let sendData = {
					keyword:this.searchtxt,
					page:this.page,
					limit:this.limit,
					is_complaint:''
				};
				let orderstatus = '';
				if(this.navac == 0){
					sendData.order_status = '';
				}else if(this.navac == 1){
					sendData.order_status = 0;
				}else if(this.navac == 2){
					sendData.order_status = 1;
				}else if(this.navac == 3){
					sendData.order_status = 10000
				}else if(this.navac == 4){
					sendData.order_status = ''
					sendData.is_complaint = 1  // 1投诉 
				}else if(this.navac == 5){
					sendData.order_status = 2
				};
				// console.log(sendData)
				this.isloadingicon=true;
				this.apifun.$post('/pc/Order/orderList',sendData).then((res)=>{
					// console.log(res)
					this.isloadingicon=false;
					this.isshake = true;
					if(res.code ==  200){
						let datas = res.data;
						if(datas.data.length <= 0){
							this.page--;
							return false
						};
						this.ointdata = [...this.ointdata,...datas.data];
					}
				})
			}, 
			getOrderArrfun(){  //  获取附加功能
				this.apifun.$post('/pc/order/getOrderFieldArr',{}).then((res)=>{
					// console.log(res)
					if(res.code ==  200){
						res.data.forEach((item,index)=>{
							item.fieldtxt='';
						});
						this.orderarrdata = res.data;
					}
				})
			},
			getdesigner(){  // 获取销售成员
				this.apifun.$post('/pc/order/designer',{}).then((res)=>{
					// console.log(res)
					if(res.code ==  200){
						let datas = res.data;
						this.xslistdata = datas;
					}
				})
			}
		}
	}
</script>
<style>
	#order .infosearch-input .el-input__inner{
		background-color: #FFF6F1;
		height:36px;
		line-height: 36px;
	}
	#order .infosearch-input .el-input__inner:focus,
	#order .replaceisselect .el-input__inner:focus{
		border-color:#FF5E03;
	}
	#order .replaceisselect .el-input__inner{
		background-color: #F6F6F6;
		height:50px;
		line-height:50px;
	}
	#order .eyeach .el-input__inner{
		height:30px;
		line-height: 30px;
		border: none;
	}
	#createorder .el-dialog__body{
		padding: 0 20px 30px;
	}
	#uploadfliexq .el-upload-dragger:hover{
		border-color: var(--mainColor);
	}
	#uploadfliexq .el-upload-dragger{
		border-color: var(--mainColor);
	}
</style>
<style scoped lang="scss">
	.information {
		position: relative;
		z-index:50;
		width:200px;
		height: 98vh;
		overflow-y: auto;
		background-color: #fff;
		border-right: 1px solid #EBEBEB;
	}
	.topfixed{
		position:sticky;
		z-index: 100;
		top: 0;
		left: 0;
		width:200px;
		background-color: #fff;
	}
	// 搜索
	.infosearch {
		z-index: 100;
		width: 180px;
		height: 38px;
		.infosearch-input {
			width: 140px;
			height: 38px;
			border: none;
			margin-top: 5px;
		}
		
		.infosearch-add {
			position:absolute;
			top:8px;
			right:10px;
			width: 32px;
			height: 32px;
		}
	}
	// nav导航
	.ointnav{
		width: 180px;
		overflow-x:scroll;
		.ointnavmain{
			width:260px;
			padding:20px 0 10px;
			.ointnaveach{
				position: relative;
				height:22px;
				color:#333333;
				font-weight: bold;
				font-size: 14px;
				margin-right: 10px;
			}
			.ointnaveach:hover{
				color: var(--mainColor);
			}
			.ointnaveach::before{
				position: absolute;
				bottom:-4px;
				display: block;
				content: "";
				width: 100%;
				height:6px;
				background-color:#fff;
				border-radius:100px;
			}
			.navactive{
				color: var(--mainColor);
			}
			.navactive::before{
				background-color:var(--mainColor);
			}
		}
	}
	// 指派列表
	.ointblock {
		width: 180px;
		height:80vh;
		padding-top:20px;
		overflow-y: auto;
		.ointeach {
			position: relative;
			width: 178px;
			margin-bottom: 20px;
			border-radius: 10px;
			.ointeachbricon{
				position: absolute;
				bottom:7px;
				right:7px;
				width:16px;
				height: 16px;
			}
			.ointeacht{
				width: 160px;
				padding: 0 10px;
				height: 40px;
				line-height: 40px;
				border-bottom: 1px solid #EEEEEE;
				justify-content: space-between;
				font-size:14px;
			}
			.ointeachb{
				width: 160px;
				padding: 5px 10px;
				line-height: 30px;
				color: #333;
				.ointeachbtitle{
					font-weight: bold;
					font-size:14px;
				}
				.ointeachbdec{
					font-size:14px;
				}
			}
		}
	
		.activeointeach {
			background-color: var(--bgColor);
		}
	}
	.rblock{
		position: relative;
		flex: 1;
		height: 98vh;
		z-index: 99;
		background-color:#F7F7F7;
		overflow-y:auto;
	}
	// 弹窗
	.replacebtn{
		margin-top: 30px;
		display: flex;
		justify-content:flex-end;
		.replacebtneach{
			width:130px;
			height: 50px;
			border-radius: 10px;
			color: #fff;
			font-size:16px;
			margin-left: 25px;
		}
	}
	// --创建新订单
	.eyeach{
		justify-content:space-between;
		.eyeachtitle{
			line-height:30px;
			color:#333333;
			font-size: 14px;
		}
		.eyeachr{
			width:75%;
			line-height: 30px;
			.eyeachrinput{
				height: 30px;
				line-height: 30px;
			}
			.eyeachrneed{
				width:85%;
				height:80px;
				padding:10px;
				border-radius:5px;
				border: none;
				outline: none;
				resize: none;
				line-height:16px;
				background-color:#F7F7F7;
				color:#333;
				font-size: 12px;
			}
		}
	}
	.uploadbtn{
		justify-content:flex-end;
		.uploadbtneach{
			margin-left:10px;
			border: 1px solid var(--mainColor);
			padding:10px;
			border-radius:10px;
			
			.uploadbtneachimg{
				width: 20px;
				height:20px;
				margin-top:4px;
			}
			.uploadbtneachtxt{
				line-height: 30px;
				margin-left: 8px;
			}
		}
	}
	// 上传文件list
	.flielist{
		margin-top:10px;
		.flieitem{
			justify-content: space-between;
			line-height:30px;
			padding: 0 10px;
			border-radius: 5px;
			.flieiteml{
				.flieitemlicon{font-size:16px;}
				.flieitemlname{
					font-size: 14px;
					margin-left:8px;
				}
			}
			.flieitemr{
				width:30px;
				text-align: center;
				font-size:16px;
				color:#999;
				text-align: right;
			}
		}
		.flieitem:hover{
			background-color:#F7F7F7;
		}
	}
</style>